<!-- subpkg_consult/room/components/patient-info.vue -->
<script lang="ts" setup>
  import type { ConsultRecord } from '@/types/room'
  // 接收父组件传递的props
  const props = defineProps<{
    record: ConsultRecord
  }>()
  // 患病时长
  const illnessTimes = [
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' },
  ]
  // 是否就诊过
  const consultFlags = [
    { value: 0, text: '未就诊' },
    { value: 1, text: '就诊过' },
  ]
  // 患病时长
  const illnessTime = illnessTimes.find((item) => item.value === props.record.illnessTime)?.text
  // 是否就诊过
  const consultFlag = consultFlags.find((item) => item.value === props.record.consultFlag)?.text

  // 预览图片
  const previewImage = (index: number) => {
    uni.previewImage({
      // urls:["地址1", "地址2"],
      urls: props.record.pictures.map((item) => item.url), // [{url: "地址1"}, {url: "地址2"}] => ["地址1", "地址2"]
      current: index,
    })
  }
</script>
<template>
  <!-- 患者信息（21） -->
  <view class="patient-info">
    <view class="header">
      <view class="title">
        {{ record.patientInfo?.name }} {{ record.patientInfo?.genderValue }}
        {{ record.patientInfo?.age }}岁
      </view>
      <view class="note">{{ illnessTime }} | {{ consultFlag }}</view>
    </view>
    <view class="content">
      <view class="list-item">
        <text class="label">病情描述</text>
        <text class="note">{{ record.illnessDesc }}</text>
      </view>
      <view class="list-item" v-if="record.pictures.length > 0">
        <text class="label">图片</text>
        <view class="images">
          <image
            v-for="(item, index) in record.pictures"
            :key="index"
            :src="item.url"
            mode="aspectFill"
            @click="previewImage(index)"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  .patient-info {
    padding: 30rpx;
    margin-top: 60rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    background-color: #fff;

    .header {
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #ededed;

      .title {
        font-size: 32rpx;
        color: #121826;
        margin-bottom: 10rpx;
      }

      .note {
        font-size: 26rpx;
        color: #848484;
      }
    }

    .content {
      margin-top: 20rpx;
      font-size: 26rpx;

      .list-item {
        display: flex;
        margin-top: 10rpx;
        .images {
          display: flex;
          flex-wrap: wrap;
          image {
            width: 160rpx;
            height: 160rpx;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
          }
        }
      }

      .label {
        width: 130rpx;
        color: #3c3e42;
      }

      .note {
        flex: 1;
        line-height: 1.4;
        color: #848484;
      }
    }
  }
</style>
